<template>
  <div id="app" >
    <el-backtop :visibility-height='100' :bottom="100"
    style="{
    position: fixed;
    right: 7%;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0,0,0, .12);
    text-align: center;
    line-height: 40px;
    color:#ff6700;
      }">
      Up
    </el-backtop>
    <div class="fixedtop">
      <header ref="headerCss">  
        <el-row :gutter="0" >
        <el-col :xs="2" :sm="3" :md="4" :lg="4" :xl="4">
        <div ref="logoCss"  class="logo" >
        <img src="./images/logo.png" alt="" srcset="">
        </div>
        </el-col>
        <el-col :xs="20" :sm="18" :md="16" :lg="16" :xl="16">
        <div>
          <el-menu
          default-active="/Home"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router>
          <el-row :gutter="0">
            <!-- 在Element UI 中 打开 router 就可以直接在index中配置路由路径 -->
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <el-menu-item index="/Home">
            <div class="beCenter">
              <i class="el-icon-menu"></i>首页
              </div>
            </el-menu-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <el-menu-item index="/productList">
            <div class="beCenter">
              <i class="el-icon-menu"></i>处理商品
              </div>
            </el-menu-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <el-menu-item index="/productDetail">
            <div class="beCenter">
              <i class="el-icon-menu"></i>商品仓库
              </div>
            </el-menu-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <el-menu-item >
            <div class="beCenter uName ">
              <i class="el-icon-user-solid"></i>
              <span class="name">00</span> 
            </div>
            </el-menu-item>    
          </el-col>
          </el-row>
          </el-menu>
        </div >
        </el-col>
        <el-col :xs="2" :sm="3" :md="4" :lg="4" :xl="4">
          <div class="hidBoth">郭于</div>
        </el-col>
        </el-row >
      </header>
    </div>
    <div class="hidBoth" ref="fixedTop">郭于</div>
  <router-view />
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        { 
        id:1,name: "Remi 9", ctime: "2019-12-12T03:20:59.000Z",price:799, 
        detail:'5020mAh超长续航+18W快充 / G80高性能处理器 / 128GB大内存 / 全场景 AI 四摄 / 1080P 全高清大屏 / 6.53"水滴大屏 / 大功率扬声器 / 指纹识别+人脸解锁 / 红外遥控',
        number:1 ,imgData:"../images/Remi 9.jpg" 
        },
        { 
        id:2,name: "Remin K30 Pro 系列", ctime: "2020-10-29T09:54:14.000Z",price:2999,
        detail:'双模5G / 高通骁龙865 / 弹出式超光感全面屏 /索尼 6400万高清四摄 / 8K视频拍摄 / 超大面积VC立体散热 / 4700mAh+33W疾速闪充 / 多功能NFC / 红外遥控',
        number:4 ,imgData:"../images/Remin K30 Pro 系列.jpg" 
        },
        { 
        id:3,name: "Remin K30 至尊纪念版", ctime: "2020-10-29T12:08:23.000Z",price:2199, 
        detail:'120Hz弹出全面屏 / 天玑1000+旗舰处理器 / 索尼6400万四摄 / 立体声双扬声器 / 4500mAh+33W闪充 / 双模5G / 多功能NFC / 线性震动马达 / 红外遥控',
        number:4 ,imgData:"../images/Remin K30 至尊纪念版.jpg" 
        },
        { 
        id:4,name: "Redmi 10X", ctime: "2020-10-29T13:02:50.000Z",price:1399, 
        detail:'双5G待机/天玑820处理器/4800万流光相机+800万超广角/6.57"三星AMOLED屏幕/屏幕指纹/4520mAh长续航/红外遥控',
        number:3 ,imgData:"../images/Redmi 10X.jpg" 
        },
        { 
        id:5,name: "Redmi K30S 至尊纪念版", ctime: "2020-10-30T12:08:23.000Z",price:4499, 
        detail:'5020mAh超长续航+18W快充 / G80高性能处理器 / 128GB大内存 / 全场景 AI 四摄 / 1080P 全高清大屏 / 6.53"水滴大屏 / 大功率扬声器 / 指纹识别+人脸解锁 / 红外遥控',
        number:1 ,imgData:"../images/小米10 Pro.jpg" 
        },
        { 
        id:6,name: "Redmi Note 8", ctime: "2020-11-02T13:02:50.000Z",price:1199 , 
        detail:'6400万旗舰级全场景四摄 / 前置2000万 AI美颜相机 / G90T专业游戏芯片，液冷散热 / 6.53英寸水滴全面屏 / 4500mAh大电量 / 标配18W快充 / 康宁大猩猩保护玻璃 / 多功能NFC / 红外遥控功能 / Game Turbo2.0游戏加速',
        number:4 ,imgData:"../images/Redmi Note 8.jpg" 
        },        
        { 
        id:7,name: "Redmi 智能电视 MAX 98", ctime: "2020-11-11T12:08:23.000Z",price:19999, 
        detail:'客厅里的巨幕影院 大视野带来超震撼的沉浸感/4K HDR超高清画质 逼真画面栩栩如生/杜比+DTS双解码 清澈立体的声音环绕整个客厅/MEMC运动补偿 无拖尾无重影/4G+64G大存储 畅快不卡顿/海量片源 观影更爽/智能家居控制中心',
        number:1 ,imgData:"../images/Redmi 智能电视 MAX 98.jpg" 
        },        
        { 
        id:8,name: "RedmiBook 16", ctime: "2020-11-30T12:08:23.000Z",price:5699, 
        detail:'全新十代酷睿处理器 / MX350独显 / 16英寸超窄边框高清屏',
        number:1 ,imgData:"../images/RedmiBook 16.jpg" 
        },       
        { 
        id:9,name: "小米10 5G 青春版", ctime: "2020-09-11T12:08:23.000Z",price:1999, 
        detail:'向往的生活同款/ 50倍潜望式超远变焦 / 双模5G / 骁龙765G处理器 / 三星AMOLED原色屏 / 180Hz采样率 / 4160mAh大电池 / 多功能NFC / 红外遥控器',
        number:2 ,imgData:"../images/小米10 5G 青春版.jpg" 
        },       
        { 
        id:10,name: "小米10 Pro", ctime: "2020-10-11T12:08:23.000Z",price:1999, 
        detail:'5020mAh超长续航+18W快充 / G80高性能处理器 / 128GB大内存 / 全场景 AI 四摄 / 1080P 全高清大屏 / 6.53"水滴大屏 / 大功率扬声器 / 指纹识别+人脸解锁 / 红外遥控',
        number:1 ,imgData:"../images/小米10 Pro.jpg" 
        },       
        { 
        id:11,name: "小米10", ctime: "2020-02-11T12:08:23.000Z",price:3799, 
        detail:'骁龙865处理器 / 1亿像素8K电影相机 / 双模5G / 新一代LPDDR5内存 / 对称式立体声 / 90Hz刷新率+180Hz采样率 / UFS 3.0高速存储 / 全面适配Wi-Fi 6 / 超强VC液冷散热 / 30W极速闪充+30W无线闪充+10W无线反充 / 4780mAh大电量 / 多功能NFC',
        number:3 ,imgData:"../images/小米10.jpg" 
        },       
        { 
        id:12,name: "小米10至尊纪念版", ctime: "2020-11-11T12:08:11.000Z",price:5599 , 
        detail:'120X 超远变焦 / 120W 秒充科技 / 120Hz刷新率 + 240Hz采样率 / 骁龙865旗舰处理器 / 双模5G / 10倍混合光学变焦 / OIS光学防抖+EIS数字防抖 / 2000万超清前置相机 / 双串蝶式石墨烯基锂离子电池 / 等效4500mAh大电量 / 120W 有线秒充+50W无线秒充+10W无线反充 / WiFi 6 / 多功能NFC / 红外遥控',
        number:1 ,imgData:"../images/小米10至尊纪念版.jpg" 
        },       
        { 
        id:13,name: "小米电视 大师 65英寸OLED", ctime: "2020-11-11T12:54:23.000Z",price:12999, 
        detail:'10.7亿原色显示 / 98.5%DCI-P3广色域 / 120Hz流速屏 / AI大师引擎 / 3D全景声，音响系统',
        number:2 ,imgData:"../images/小米电视 大师 65英寸OLED.jpg" 
        },       
        { 
        id:14,name: "小米电视大师 82英寸至尊纪念版", ctime: "2020-11-11T12:42:23.000Z",price:49999, 
        detail:'8K超高清/量子点技术/声动之翼/支持5G网络/全通道8K',
        number:1 ,imgData:"../images/小米电视大师 82英寸至尊纪念版.jpg" 
        },       
        { 
        id:15,name: "小米透明电视", ctime: "2020-11-11T12:08:23.000Z",price:49999, 
        detail:'55″透明OLED | 悬浮影像 ｜杜比全景声 ｜四核A73 旗舰处理器',
        number:1 ,imgData:"../images/小米透明电视.jpg" 
        },
],
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      headerHeight:'',
      logoWidth:'',
    }
  },
  created() {
    localStorage.setItem("productList", JSON.stringify(this.productList));

  },
  mounted() {
 
    this.logoCenter()

// onresize 事件会在窗口或框架被调整大小时发生
    window.onresize = () => {
        return (() => {
          this.logoCenter()
        })()
      };    
  },
  methods: {
    // logo随着窗口宽度变幻时，改变自己的大小
    logoCenter() {
    this.headerHeight = window.getComputedStyle(this.$refs.headerCss).height
    this.logoWidth = window.getComputedStyle(this.$refs.logoCss).width

    this.$refs.fixedTop.style.marginTop=this.headerHeight  

    this.headerHeight =parseInt((this.headerHeight.replace("px","")-56)/2) 
    this.logoWidth =parseInt((this.logoWidth.replace("px","")-75)/2) 
    
    this.$refs.logoCss.style.marginTop=this.headerHeight+'px'  
    this.$refs.logoCss.style.marginLeft=this.logoWidth+'px'  
    }
  },

}
</script>

<style lang="less" scope>
  body {
    background-color: #fbfbfb;
    min-width:750px; 
    overflow:auto;
  }
  .backTop {
    position: fixed;
    height: 100%;
    width: 100%;
    right: 50%;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0,0,0, .12);
    text-align: center;
    line-height: 40px;
    color:#ff6700;
  }
  .fixedtop {
      header
      {        
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;
      }    
    } 
    .hidBoth {
      margin-left: 10000px;
      height: 21px;
      overflow: hidden;
    }
    .clear {
        clear: both;
    }
    header {
    background-color: #545c64;
    .logo {
    display: block;
    img {
      display: block;
      height: 56px;
    }
      }
    .beCenter {
      text-align: center;
    }
    .uName {
    height: 57px;
    line-height: 57px;
    color: #ffd04b;
    
    .name {
      display: inline-block;
      padding-left: 10px;
    }
  }
}

</style>